<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系人信息</title>
    <link href="./css/normalize.css" rel="stylesheet" type="text/css">
    <link href="./css/TypeManagement.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="./css/font/iconfont.css">
    <link rel="stylesheet" href="./css/normalize.css">


</head>
<body>
<div class="tbox">
    <div class="left">
        <iframe name="NavigationBar" width="250px" height="930px"
                src="components/NavigationBar.jsp" frameborder=0 scrolling="no"></iframe>
    </div>
    <div class="right">
        <iframe id="type" height="160px" name="NavigationBar" width=100% src="components/Header.jsp" frameborder=0
                scrolling="no"></iframe>
        <div class="catalog">当前位置：<a href="#">/ 联系人信息 /</a></div>
        <form action="ContactsServlet?type=queryAll" method="post">
            <div class="typeSearch">
                <div> 用户名称：<input type="text" name="name" id="" placeholder="请输入名称"></div>
                <div> 手机号码：<input type="text" name="phone" id="" placeholder="请输入手机号码"></div>
                <button class="_right_top_item_btn01 iconfont icon-sousuo">搜索</button>
            </div>
        </form>

        <div class="buttons">
            <button class="buttons_btn1"><span class="iconfont icon-tianjia"></span>新增</button>
        </div>

        <div class="info">
            <table>
                <tr>
                    <th>主键</th>
                    <th>姓名</th>
                    <th>职位</th>
                    <th>手机号</th>
                    <th>固定号码</th>
                    <th>电子邮箱</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${contacts}" var="contact">
                    <tr>
                        <td>${contact.contactsId}</td>
                        <td>${contact.name}</td>
                        <td>${contact.position}</td>
                        <td>${contact.phone}</td>
                        <td>${contact.telephone}</td>
                        <td>${contact.email}</td>
                        <td>
                            <button class="updateInfo" onclick="update(this)" value="${contact}">修改</button>
                            <span style="font-size: 20px;">|</span>
                            <button class="delInfo"><a
                                    href="/ContactsServlet?type=deleteById&contacts_id=${contact.contactsId}"
                                    onclick="return window.confirm('你确定要删除吗？删除数据后不可恢复，请谨慎操作！')">删除</a>
                            </button>
                        </td>
                    </tr>
                </c:forEach>
                <tr>
                    <td colspan="7">
                        总共${pages}页 共${totals}条
                        <a href="ContactsServlet?type=queryAll&pageNow=1">首页</a>
                        <a href="ContactsServlet?type=queryAll&pageNow=${pageNow >= pages ? pages:pageNow+1}">下一页</a>
                        <a href="ContactsServlet?type=queryAll&pageNow=${pageNow <= 1?1:pageNow-1}">上一页</a>
                        <a href="ContactsServlet?type=queryAll&pageNow=${pages}">尾页</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<!-- 修改 -->
<div class="overlay">
    <div class="update">
        <div class="head_box">
            <span>修改信息</span>
        </div>
        <div class="body_box">
            <form action="ContactsServlet?type=updateById" method="post">
                <table>
                    <tr>
                        <td>
                            <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span>联系人id:</div>
                        </td>
                        <td>
                            <div><input type="text" class="updateObject" name="contacts_id" id=""></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span>公司id:</div>
                        </td>
                        <td>
                            <div><input type="text" class="updateObject" name="company_id" id="" placeholder="请输入公司id">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span>姓名:</div>
                        </td>
                        <td>
                            <div><input type="text" class="updateObject" name="name" id="" placeholder="请输入姓名"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 职位：</div>
                        </td>
                        <td>
                            <div>
                                <label><input type="text" class="updateObject" name="position"
                                              placeholder="请输入职位"></label></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 手机号：</div>
                        </td>
                        <td>
                            <div><label><input type="text" class="updateObject" name="phone"
                                               placeholder="请输入手机号"></label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div> 固定电话：</div>
                        </td>
                        <td>
                            <div><label><input type="text" class="updateObject" name="telephone" placeholder="请输入固定电话"></label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 邮箱：</div>
                        </td>
                        <td>
                            <div><label><input type="text" class="updateObject" name="email"
                                               placeholder="请输入邮箱"></label>
                            </div>
                        </td>
                    </tr>
                </table>
                <div class="footer_box">
                    <input type="button" class="cancel" value="取消"></input>
                    <input type="submit" class="confirm" value="确定"></input>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 添加 -->
<div class="add">
    <div class="update">
        <div class="head_box">
            <span>添加信息</span>
        </div>
        <div class="body_box">
            <form action="ContactsServlet?type=addContacts" method="post">
                <table>
                    <tr>
                        <td>
                            <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span>公司id:</div>
                        </td>
                        <td>
                            <div><input type="text" name="company_id" id="" placeholder="请输入公司id"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span>姓名:</div>
                        </td>
                        <td>
                            <div><input type="text" name="name" id="" placeholder="请输入姓名"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 职位：</div>
                        </td>
                        <td>
                            <div>
                                <label><input type="text" name="position" placeholder="请输入职位"></label></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 手机号：</div>
                        </td>
                        <td>
                            <div><label><input type="text" name="phone" placeholder="请输入手机号"></label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div> 固定电话：</div>
                        </td>
                        <td>
                            <div><label><input type="text" name="telephone" placeholder="请输入固定电话"></label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div><span style="color: red;font-weight: 700;margin-right: 3px;">*</span> 邮箱：</div>
                        </td>
                        <td>
                            <div><label><input type="text" name="email" placeholder="请输入邮箱"></label>
                            </div>
                        </td>
                    </tr>

                </table>
                <div class="footer_box">
                    <input type="submit" class="cancel01" value="取消"></input>
                    <input type="submit" class="confirm" value="确定"></input>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    let updateInfo = document.querySelectorAll('.updateInfo')
    let overlay = document.querySelector('.overlay')
    let cancel01 = document.querySelector('.cancel01')
    let addInfo = document.querySelector('.add')
    let cancel = document.querySelector('.footer_box').getElementsByTagName('input')[0]
    let add = document.querySelector('.buttons').getElementsByTagName('button')[0]

    let iFrame = document.querySelector('#type')

    iFrame.onload = function () {
        iFrame.contentWindow.postMessage(window.location.pathname.substr(window.location.pathname.lastIndexOf('/')), '*');
    }

    updateInfo.forEach((item, index) => {
        item.addEventListener('click', (e) => {
            overlay.style.display = 'block'
            e.stopPropagation()
        })
    })

    cancel.onclick = function (e) {
        overlay.style.display = "none";
        addInfo.style.display = "none"
    }
    cancel01.onclick = function (e) {
        overlay.style.display = "none";
        addInfo.style.display = "none"
    }

    add.addEventListener('click', (e) => {
        addInfo.style.display = 'block'
    })

    function update(value) {
        const object = value.value.substring(5).replace(/'/g, "").replace(/{/g, "").replace(/}/g, "");
        console.log(object);
        let matchList = object.match(/=([^,]*)/g);
        let dataList = matchList.map(match => match.substring(1))
        const input = document.getElementsByClassName('updateObject');
        for (let i = 0; i < dataList.length; i++) {
            input[i].value = dataList[i]
        }
    }
</script>
</body>
</html>